<template>
  <div>
    <div class="question-item" v-for="(question, index) in data" style="font-size:14px">
      <component
        v-bind:is="getCurrentComponent(question)"
        :question="question"
        :pattern="pattern"
        :index="index"
        :showRightAnswer="isShowRightAnswer"
        :showNoAnswer="showNoAnswer"
        :showAnswerResult="isShowAnswerResult"
        :showUserAnswer="isShowUserAnswer"
        :showChecked="showChecked"
        :showScore="showScore"
        :showExplanation="isShowExplanation"
        :disabledAnswer="isDisabledAnswer"
        :isGrader="isGrader"
        :paperid="paperid"
        :userId="userId"
        :examid="examid"
        :showGrade="showGrade"
        :disabled="disabled"
        :showWriteUp="showWriteUp"
        :directionData="useDirectionData"
        @handleSelect="handleSelect"
        @on-marking="marking"
        @handleAnswerSelect="handleAnswerSelect"
      >
        <template slot="action" slot-scope="{ question, index }">
          <slot name="action" v-bind:question="question" v-bind:index="index"> </slot>
        </template>
      </component>
      <Divider v-if="showDivider" dashed />
    </div>
  </div>
</template>
<script>
import SingleQuestion from './components/question-single'
import MutipleQuestion from './components/question-multiple'
import TrueOrFalseQuestion from './components/question-true-or-false'
import CtfQuestion from './components/question-ctf'
import FillInTheBlanksQuestion from './components/question-fill-in-the-blanks'
import dictMixin from '@/mixin/dictMixin' //字典查询混入  getDictByName  dictData
export default {
  name: 'QuestionList',
  components: {
    SingleQuestion,
    MutipleQuestion,
    TrueOrFalseQuestion,
    CtfQuestion,
    FillInTheBlanksQuestion
  },
  mixins: [dictMixin],
  props: {
    showWriteUp: {
      type: Boolean,
      default: false
    },
    paperid: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    },
    examid: {
      type: String,
      default: ''
    },
    showGrade: {
      type: Boolean,
      default: false
    },
    isGrader: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default() {
        return []
      },
      validator(value) {
        //1-单选、2-多选、3-判断、4-填空、5-简答、6-ctf (以题目类型为准)
        //					console.log(value);
        return value.every((item) => {
          let hasModeCode = ['1', '2', '3', '4', '5', '6'].includes(item.modeCode.toString())
          let hasName = item.name || item.description ? true : false
          return hasModeCode && hasName
        })
      }
    },
    showChecked: {
      type: Boolean,
      default: false
    },
    pattern: {
      type: String,
      default: 'show',
      validator(value) {
        return ['show', 'answer'].includes(value)
      }
    },
    answerStatus: {
      type: String,
      default: 'finish',
      validator(value) {
        return ['finish', 'progress'].includes(value)
      }
    },
    showRightAnswer: {
      type: Boolean,
      default: function() {
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    showExplanation: {
      type: Boolean,
      default: function() {
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    showAnswerResult: {
      type: Boolean,
      default: function() {
        return this.pattern === 'show' ||
          (this.pattern === 'answer' && this.answerStatus === 'progress')
          ? false
          : true
      }
    },
    showUserAnswer: {
      type: Boolean,
      default: function() {
        return this.pattern === 'show' ||
          (this.pattern === 'answer' && this.answerStatus === 'progress')
          ? false
          : true
      }
    },
    disabledAnswer: {
      type: Boolean,
      default: function() {
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    showScore: {
      type: Boolean,
      default: true
    },
    showDivider: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: [Boolean, Function],
      defaule: false
    },
    showNoAnswer: {
      //是否显示此题未作答
      type: Boolean,
      default: false
    },
    directionData: {
      //方向类型,可不传（如果组件被同一个页面多次调用而引发的接口多次请求-性能问题，可以考虑传递这个）
      type: Array,
      defaule: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    isShowRightAnswer() {
      if (this.hasSetShowRightAnswer) {
        //如果设置了值，使用设置的值
        return this.showRightAnswer
      } else {
        //否则默认  答题模式+进行中 不显示正确答案，其他都显示
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    isShowExplanation() {
      if (this.hasSetShowExplanation) {
        //如果设置了值，使用设置的值
        return this.showExplanation
      } else {
        //否则默认  答题模式+进行中 不显示解析，其他都显示
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    isShowAnswerResult() {
      if (this.hasSetShowAnswerResult) {
        //如果设置了值，使用设置的值
        return this.showAnswerResult
      } else {
        //否则默认  显示模式/答题模式+进行中 不显示答题结果，其他都显示
        return this.pattern === 'show' ||
          (this.pattern === 'answer' && this.answerStatus === 'progress')
          ? false
          : true
      }
    },
    isShowUserAnswer() {
      if (this.hasSetShowUserAnswer) {
        //如果设置了值，使用设置的值
        return this.showUserAnswer
      } else {
        //否则默认  显示模式/答题模式+进行中 不显示用户答案，其他都显示
        return this.pattern === 'show' ||
          (this.pattern === 'answer' && this.answerStatus === 'progress')
          ? false
          : true
      }
    },
    isDisabledAnswer() {
      if (this.hasSetDisabledAnswer) {
        //如果设置了值，使用设置的值
        return this.disabledAnswer
      } else {
        //否则默认  答题模式+进行中 不禁用答题选择，其他都禁用
        return this.pattern === 'answer' && this.answerStatus === 'progress' ? false : true
      }
    },
    hasSetShowRightAnswer() {
      return Object.keys(this.$options.propsData).includes('showRightAnswer')
    },
    hasSetShowAnswerResult() {
      return Object.keys(this.$options.propsData).includes('showAnswerResult')
    },
    hasSetShowExplanation() {
      return Object.keys(this.$options.propsData).includes('showExplanation')
    },
    hasSetShowUserAnswer() {
      return Object.keys(this.$options.propsData).includes('showUserAnswer')
    },
    hasSetDisabledAnswer() {
      return Object.keys(this.$options.propsData).includes('disabledAnswer')
    },
    hasSetDirectionData() {
      return Object.keys(this.$options.propsData).includes('directionData')
    },
    useDirectionData() {
      return this.hasSetDirectionData
        ? this.directionData
        : this.dictData.newDirectionType
        ? this.dictData.newDirectionType.data
        : []
    }
  },
  filters: {
    difficultyFilter: (val) => {
      let difficultyStr = ''
      if (val) {
        val = val.toLowerCase()
      }
      switch (val) {
        case 'simple':
          difficultyStr = '简单'
          break
        case 'commonly':
          difficultyStr = '一般'
          break
        case 'medium':
          difficultyStr = '中等'
          break
        case 'hard':
          difficultyStr = '较难'
          break
      }
      return difficultyStr
    },
    modeFilter: (val) => {
      let str = ''
      if (val) {
        val = parseInt(val)
      }
      switch (val) {
        case 1:
          str = '单选'
          break
        case 2:
          str = '多选'
          break
        case 3:
          str = '判断'
          break
        case 4:
          str = '填空'
          break
        case 5:
          str = '简答'
          break
      }
      return str
    },
    filterIsPublic(type) {
      //1--共享  2--未共享
      let status = ''
      if (type === 1 || type === '1') {
        status = '共享'
      } else if (type === 2 || type === '2') {
        status = '未共享'
      }
      return status
    }
  },
  watch: {},
  created() {},
  mounted() {
    if (!this.hasSetDirectionData) {
      this.getDictByName('newDirectionType', true)
    }
  },
  methods: {
    getCurrentComponent(question) {
      switch (question.modeCode.toString()) {
        case '1':
          return 'SingleQuestion'
          break
        case '2':
          return 'MutipleQuestion'
          break
        case '3':
          return 'TrueOrFalseQuestion'
          break
        case '6':
          return 'CtfQuestion'
          break
        case '4':
          return 'FillInTheBlanksQuestion'
          break
        case '5':
          return 'CtfQuestion'
          break
        default:
          return 'SingleQuestion'
      }
    },
    //checked,选择题目调用
    handleSelect($event, question) {
      this.$emit('on-select', $event, question)
    },
    //选择答案调用
    handleAnswerSelect(question, item, curAnswer) {
      if (Array.isArray(question.userAnswer) && !question.userAnswer[0]) {
        question.userAnswer.shift()
      }
      this.$emit('on-answer', question, item, curAnswer)
    },
    marking() {
      this.$emit('on-marking')
    }
  }
}
</script>
<style scoped>
.question-item {
  position: relative;
  line-height: 2;
}
</style>
